<template>
	<view class="container" v-show="contentShow">
		<!-- #ifdef MP -->
		<view class="mp-search-box">
			<input class="ser-input" type="text" value="输入关键字搜索" disabled />
		</view>
		<!-- #endif -->

		<view class="carousel-section" >
			<view class="titleNview-background" :style="{backgroundColor:titleNViewBackground}"></view>
			<swiper class="carousel" circular @change="swiperChange">
				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item">
					<image :src="item.src" />
				</swiper-item>
			</swiper>
			<view class="swiper-dots">
				<text class="num">{{swiperCurrent+1}}</text>
				<text class="sign">/</text>
				<text class="num">{{swiperLength}}</text>
			</view>
		</view>

		<view class="category-div">
			<view class="grid col-4">
				<view
					class="bg-img"
					v-for="(item, index) in categoryList"
					:key="index"
					@click="tabClick(item.id)">
					<image :src="item.img"></image>
					<p>{{ item.name }}</p>
				</view>
			</view>
		</view>

		<view class="bg_hot">
			<image src="../../static/hot.png"></image>
		</view>

		<view class="guess-section">
			<view class="grid col-2 grid-square">
				<view
					class='guess-item'
					v-for="(item, index) in goodsList" :key="index"
					@click="navToDetailPage(item)"
				>
					<image :src="item.img" mode="aspectFill"></image>
					<text class="title clamp">{{ item.name }}</text>
					<text class="price">
						<span>{{ item.integral }}</span>积分
					</text>
				</view>
			</view>
		</view>




		<!-- 分类 -->
		<!-- <view class="cate-section">
			<view class="cate-item"
				v-for="item in categoryList"
				:key="item.id"
				@click="tabClick(item.id)">
				<image :src="item.img"></image>
				<text>{{item.name}}</text>
			</view>
		</view> -->

		<!-- <view class="ad-1">
			<image src="/static/temp/ad1.jpg" mode="scaleToFill"></image>
		</view> -->

		<!-- 秒杀楼层 -->
		<!-- <view class="seckill-section m-t">
			<view class="s-header">
				<image class="s-img" src="/static/temp/secskill-img.jpg" mode="widthFix"></image>
				<text class="tip">8点场</text>
				<text class="hour timer">07</text>
				<text class="minute timer">13</text>
				<text class="second timer">55</text>
				<text class="yticon icon-you"></text>
			</view>
			<scroll-view class="floor-list" scroll-x>
				<view class="scoll-wrapper">
					<view
						v-for="(item, index) in goodsList" :key="index"
						class="floor-item"
						@click="navToDetailPage(item)"
					>
						<image :src="item.image" mode="aspectFill"></image>
						<text class="title clamp">{{item.title}}</text>
						<text class="price">￥{{item.price}}</text>
					</view>
				</view>
			</scroll-view>
		</view> -->

		<!-- 团购楼层 -->
		<!-- <view class="f-header m-t">
			<image src="/static/temp/h1.png"></image>
			<view class="tit-box">
				<text class="tit">精品团购</text>
				<text class="tit2">Boutique Group Buying</text>
			</view>
			<text class="yticon icon-you"></text>
		</view>
		<view class="group-section">
			<swiper class="g-swiper" :duration="500">
				<swiper-item
					class="g-swiper-item"
					v-for="(item, index) in goodsList" :key="index"
					v-if="index%2 === 0"
					@click="navToDetailPage(item)"
				>
					<view class="g-item left">
						<image :src="item.image" mode="aspectFill"></image>
						<view class="t-box">
							<text class="title clamp">{{item.title}}</text>
							<view class="price-box">
								<text class="price">￥{{item.price}}</text>
								<text class="m-price">￥188</text>
							</view>

							<view class="pro-box">
							  	<view class="progress-box">
							  		<progress percent="72" activeColor="#fa436a" active stroke-width="6" />
							  	</view>
								<text>6人成团</text>
							</view>
						</view>

					</view>
					<view class="g-item right">
						<image :src="goodsList[index+1].image" mode="aspectFill"></image>
						<view class="t-box">
							<text class="title clamp">{{goodsList[index+1].title}}</text>
							<view class="price-box">
								<text class="price">￥{{goodsList[index+1].price}}</text>
								<text class="m-price">￥188</text>
							</view>
							<view class="pro-box">
							  	<view class="progress-box">
							  		<progress percent="72" activeColor="#fa436a" active stroke-width="6" />
							  	</view>
								<text>10人成团</text>
							</view>
						</view>
					</view>
				</swiper-item>

			</swiper>
		</view> -->



		<!-- 分类推荐楼层 -->
		<!-- <view class="f-header m-t">
			<image src="/static/temp/h1.png"></image>
			<view class="tit-box">
				<text class="tit">分类精选</text>
				<text class="tit2">Competitive Products For You</text>
			</view>
			<text class="yticon icon-you"></text>
		</view>
		<view class="hot-floor">
			<view class="floor-img-box">
				<image class="floor-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553409398864&di=4a12763adccf229133fb85193b7cc08f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201703%2F19%2F20170319150032_MNwmn.jpeg" mode="scaleToFill"></image>
			</view>
			<scroll-view class="floor-list" scroll-x>
				<view class="scoll-wrapper">
					<view
						v-for="(item, index) in goodsList" :key="index"
						class="floor-item"
						@click="navToDetailPage(item)"
					>
						<image :src="item.image" mode="aspectFill"></image>
						<text class="title clamp">{{item.title}}</text>
						<text class="price">￥{{item.price}}</text>
					</view>
					<view class="more">
						<text>查看全部</text>
						<text>More+</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="hot-floor">
			<view class="floor-img-box">
				<image class="floor-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553409984228&di=dee176242038c2d545b7690b303d65ea&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F5ef4da9f17faaf4612f0d5046f4161e556e9bbcfdb5b-rHjf00_fw658" mode="scaleToFill"></image>
			</view>
			<scroll-view class="floor-list" scroll-x>
				<view class="scoll-wrapper">
					<view
						v-for="(item, index) in goodsList" :key="index"
						class="floor-item"
						@click="navToDetailPage(item)"
					>
						<image :src="item.image3" mode="aspectFill"></image>
						<text class="title clamp">{{item.title}}</text>
						<text class="price">￥{{item.price}}</text>
					</view>
					<view class="more">
						<text>查看全部</text>
						<text>More+</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="hot-floor">
			<view class="floor-img-box">
				<image class="floor-img" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553409794730&di=12b840ec4f5748ef06880b85ff63e34e&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01dc03589ed568a8012060c82ac03c.jpg%40900w_1l_2o_100sh.jpg" mode="scaleToFill"></image>
			</view>
			<scroll-view class="floor-list" scroll-x>
				<view class="scoll-wrapper">
					<view
						v-for="(item, index) in goodsList" :key="index"
						class="floor-item"
						@click="navToDetailPage(item)"
					>
						<image :src="item.image2" mode="aspectFill"></image>
						<text class="title clamp">{{item.title}}</text>
						<text class="price">￥{{item.price}}</text>
					</view>
					<view class="more">
						<text>查看全部</text>
						<text>More+</text>
					</view>
				</view>
			</scroll-view>
		</view> -->

		<!-- 猜你喜欢 -->
		<!-- <view class="f-header m-t">
			<image src="/static/temp/h1.png"></image>
			<view class="tit-box">
				<text class="tit">猜你喜欢</text>
				<text class="tit2">Guess You Like It</text>
			</view>
			<text class="yticon icon-you"></text>
		</view> -->
	</view>
</template>

<script>
	import { getUserIntegralByCardNo,productCategoryList,productInfoListJf,findChildrenListByParent } from 'api/shop'
	export default {

		data() {
			return {
				contentShow:true,
				titleNViewBackground: '',
				swiperCurrent: 0,
				swiperLength: 0,
				carouselList: [],
				goodsList: [],
				categoryList:[],
				indexCategoryId:''
			};
		},

		onLoad(options) {
			// getUserIntegralByCardNo({cardNo:'445381199510064031'})
			if(options.brandId){
				this.productCategoryListAction(options.brandId)
			}else{
				let categoryId = localStorage.getItem("categoryId")
				this.indexCategoryId = categoryId
				if(categoryId===''||categoryId===undefined||categoryId===null){
					this.contentShow=false
					this.$api.msg('此链接有误，请重试');
				}else{
					this.loadData(categoryId);
					this.init(categoryId)
					this.findChildrenListByParentAction(categoryId)
				}
			}

			// if(options.categoryId){
			// 	this.indexCategoryId = options.categoryId
			// 	localStorage.setItem("categoryId",options.categoryId);
			// 	this.loadData(options.categoryId);
			// 	this.init(options.categoryId)
			// 	this.findChildrenListByParentAction(options.categoryId)
			// }else{
			// 	let categoryId = localStorage.getItem("categoryId")
			// 	this.indexCategoryId = categoryId
			// 	if(categoryId===''||categoryId===undefined||categoryId===null){
			// 		this.contentShow=false
			// 		this.$api.msg('此链接有误，请重试');
			// 	}else{
			// 		this.loadData(categoryId);
			// 		this.init(categoryId)
			// 		this.findChildrenListByParentAction(categoryId)
			// 	}
			// }

		},
		methods: {
			productCategoryListAction(brandId){
				productCategoryList({brandId:brandId}).then (ret => {
					let data = ret.data.data.result
					console.log(data)
					for (var i = 0; i < data.length; i++) {
						if(data[i].name == '积分'||data[i].name == '积分商城'){
							this.indexCategoryId = data[i].id
							localStorage.setItem("categoryId",data[i].id);
							this.loadData(data[i].id);
							this.init(data[i].id)
							this.findChildrenListByParentAction(data[i].id)
						}
					}
				})
			},
			init(item){
				let data = {isJf:1,isShow:1}
				if(item !== ''){
					data.categoryId = item
				}
				productInfoListJf (data).then (ret => {
					this.goodsList = ret.data.data
				})
			},
			findChildrenListByParentAction(categoryId){
				findChildrenListByParent({parent:categoryId}).then (ret => {
					console.log(ret)
					this.categoryList = ret.data.data
					localStorage.setItem("brandId",ret.data.data[0].brandId);
				})
			},
			/**
			 * 请求静态数据只是为了代码不那么乱
			 * 分次请求未作整合
			 */
			async loadData(categoryId) {
				// let carouselList = await this.$api.json('carouselList');
				// this.titleNViewBackground = carouselList[0].background;
				// this.swiperLength = carouselList.length;
				// this.carouselList = carouselList;
				// if(categoryId === '7c40f846-515e-11eb-9b3f-0242ac110002' || categoryId === 'e020dec0-441f-11eb-9475-0242ac110002'){
					this.carouselList = [
						{
							background: "orangered",
							src: "../../static/ad3.png"
						}
					]
				// }else{
				// 	this.carouselList = [
				// 		{
				// 			background: "rgb(249, 200, 217)",
				// 			src: "../../static/ad1.png"
				// 		}
				// 	]
				// }
				this.titleNViewBackground = this.carouselList[0].background;
				this.swiperLength = this.carouselList.length;
			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
				this.titleNViewBackground = this.carouselList[index].background;
			},
			//详情页
			navToDetailPage(item){
				//测试数据没有写id，用title代替
				let id = item.id;
				uni.navigateTo({
					url: `/pages/product/productJf?id=`+id
				})
			},
			tabClick(categoryId){
				uni.navigateTo({
					url: `/pages/product/productListv2?categoryId=`+categoryId+'&indexCategoryId='+this.indexCategoryId
				})
			}
		},
		// // #ifndef MP
		// // 标题栏input搜索框点击
		// onNavigationBarSearchInputClicked: async function(e) {
		// 	this.$api.msg('点击了搜索框');
		// },
		//点击导航栏 buttons 时触发
		// onNavigationBarButtonTap(e) {
		// 	const index = e.index;
		// 	if (index === 0) {
		// 		this.$api.msg('点击了扫描');
		// 	} else if (index === 1) {
		// 		// #ifdef APP-PLUS
		// 		const pages = getCurrentPages();
		// 		const page = pages[pages.length - 1];
		// 		const currentWebview = page.$getAppWebview();
		// 		currentWebview.hideTitleNViewButtonRedDot({
		// 			index
		// 		});
		// 		// #endif
		// 		uni.navigateTo({
		// 			url: '/pages/notice/notice'
		// 		})
		// 	}
		// }
		// #endif
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>
